<template>
  <div>
     <!-- 图片按钮 -->
    <div class="btn_img" @click="openDialog">
      <img :src="imageUrl" />
    </div>
    <!-- 对话框 -->
    <!-- 如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。 -->
    <el-dialog
      append-to-body
      title="选择素材"
      :visible.sync="dialogVisible">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="素材库" name="images">
    <!-- 素材库选项卡的具体内容 -->
      <div>
        <el-radio-group v-model="isCollected" size="small" @change="hSwitchCollect">
          <el-radio-button :label="false">全部</el-radio-button>
          <el-radio-button :label="true">收藏</el-radio-button>
        </el-radio-group>
      </div>
      <!-- 每行 -->
        <el-row style="margin-top: 20px"
        :gutter="10">
        <el-col
         class="img_item"
          :span="4"
          v-for="img in images"
          :key="img.id"
          :class="{selected: img.url===selectedImageUrl}"
          >
          <el-image
            style="height: 100px;"
            :src="img.url"
            fit="cover"
            @click="hSelectImage(img.url)">
          </el-image>
        </el-col>
      </el-row>
        <!-- 分页 -->
      <el-pagination
        style="margin-top:20px;"
        background
        layout="prev, pager, next"
        :page-size="10"
        @current-change="hPageChange"
        :total="total_count">
      </el-pagination>
      <!-- 按钮 -->
    </el-tab-pane>
    <el-tab-pane label="上传图片" name="upload">
    <!-- 素材库选项卡的具体内容 -->
        <!-- 上传图片选项卡的具体内容 -->
        <el-upload
        class="avatar-uploader"
        action="http://api-toutiao-web.itheima.net/mp/v1_0/user/images"
        :headers="headers"
        name="image"
        :show-file-list="false"
        :on-success="hSuccess"
        :before-upload="beforeAvatarUpload">
        <!--  - 当你设置图片的src时，浏览器会去请求图片的资源，当图片请求回来之后
        会一有一个事件触发出来，这个事件就是load -->
        <img v-if="uploadImageUrl" :src="uploadImageUrl" class="avatar" @load="hLoadUploadImage">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-tab-pane>
 </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="hConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import defaultImage from '../assets/default.png'
export default {
  name: 'cover',
  props: ['value'], // 接收v-model上传入的值
  data () {
    return {
      headers: {
        // 获取token
        Authorization: `Bearer ${localStorage.getItem('tokenStr')}`
      },
      dialogVisible: false, // 是否要显示对话框
      activeName: 'images', // 选择项中默认选中是那一项
      images: [], // 素材列表
      page: 1, // 当前页码
      imageUrl: this.value || defaultImage, // 如果父组件给它传值就用传过来的,没有传值就是用默认的
      isCollected: false, // 是否收藏
      total_count: 0, // 总条数
      uploadImageUrl: '', // 上传成功之后的预览图片地址
      selectedImageUrl: '' // 记录当前用户选中的是哪一张图片（url）
    }
  },
  methods: {
    // 点击上传图片的照片按钮
    openDialog () {
      this.dialogVisible = true // 弹出层打开
      // 每次打开清空之前选中的效果
      this.uploadImageUrl = this.selectedImageUrl = ''
      this.loadImages()
    },
    // 获取参数
    buildParam () {
      const paramsObj = {
        collect: this.isCollected, // 是否是收藏的图片
        page: this.page, // 页码
        per_page: 10 // 一页10条
      }
      return paramsObj
    },
    // 渲染页面
    async loadImages () {
      const paramsObj = this.buildParam()
      try {
        const res = await this.$axios({
          method: 'get',
          url: '/mp/v1_0/user/images',
          params: paramsObj
        })
        // console.log(res)
        this.images = res.data.data.results
        this.total_count = res.data.data.total_count
      } catch (err) {
        console.log(err)
        this.images = []
        this.total_count = 0
        this.$message.error('获取图片失败')
      }
    },
    // 用户在 收藏 和 全部 之间切换
    hSwitchCollect () {
      console.log(this.isCollected) // 是否是收藏的图片
      // 更新页码
      this.page = 1
      // 发送请求
      this.loadImages()
    },
    // 用户点击了分页页码，此时会自动接收传入的页码
    hPageChange (curPage) {
      // 1. 更新页码
      this.page = curPage
      // 发送请求
      this.loadImages()
    },
    // tab 点击事件
    handleClick () {

    },
    // 用户在图片列表上点击，表示选中某张图
    hSelectImage (url) {
      // console.log(url)
      this.selectedImageUrl = url
    },
    // 用户在对话框中点击了确认 判断用户是否提交了图片
    hConfirm () {
      if (this.activeName === 'images' && !this.selectedImageUrl) {
        // console.log(!this.selectedImageUrl)  true
        this.$message.error('必须要选择一项')
        return
      }
      if (this.activeName === 'upload' && !this.uploadImageUrl) {
        this.$message.error('必须要上传一张图片')
        return
      }
      this.imageUrl = this.activeName === 'images' ? this.selectedImageUrl : this.uploadImageUrl
      // 关闭对话框
      this.dialogVisible = false
      // 抛出事件，携带新数据，修改父组件上的v-model中绑定的值
      this.$emit('input', this.imageUrl)
    },
    hSuccess (res) {
      // 1.上传成功 预览图片
      this.uploadImageUrl = res.data.url
      // console.log(this.uploadImageUrl)
      // console.log(res)
      this.$message.success('上传成功')
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    hLoadUploadImage () {

    }
  }
}
</script>

<style scoped lang='less'>
// 图片按钮
.btn_img {
  cursor: pointer;
  width: 150px;
  height: 150px;
  border: 1px dashed #ddd;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.avatar-uploader {
  text-align: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #ddd;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
// 表示当前图片是选中的
  .selected::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3) url(../assets/selected.png) no-repeat center / 50px 50px;
  }
// 素材列表

  .img_item{
   position: relative;
    /deep/ img {
     cursor: pointer;
   }
  }
</style>
